<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渠道部终端监测</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">

</head>
<body class="bg-light min-vh-100 d-flex flex-column">
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-dark sticky-top" style="background-color: #417690;">
    <div class="container-fluid">
      <a class="navbar-brand" style="color: #f5dd5d; margin-left: 25px;">渠道部终端监测</a>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow d-flex align-items-center justify-content-center p-4" style="margin-top: 80px;">
    <div style="width: 25%; min-width: 300px;">
      <div class="card shadow-lg rounded-lg overflow-hidden">
        <div class="card-header bg-primary-custom text-center py-3" style="background-color: #417690; color: #f5dd5d; font-size: 2.0rem;">
          <h4 class="mb-0">终端监测</h4>
        </div>
        <div class="card-body p-5">

          <form action="{% url 'login' %}" method="post" class="space-y-4">
            {% csrf_token %}
            <div class="form-group">
              <label for="username" class="form-label">用户名</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fa fa-user"></i></span>
                <input type="text" name="username" class="form-control" placeholder="请输入用户名" required>
              </div>
            </div>

            <div class="form-group">
              <label for="password" class="form-label">密码</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fa fa-lock"></i></span>
                <input type="password" name="password" class="form-control" placeholder="请输入密码" required>
              </div>
            </div>

            <div class="d-grid">
              <button type="submit" class="btn text-white py-2 rounded-md transition-colors" style="background-color: #417690; margin-top: 20px;">
                <i class="fa fa-sign-in me-2"></i>登录系统
              </button>
            </div>
          </form>
          {% if messages %}
          <ul class="messages">
            {% for message in messages %}
              <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
            {% endfor %}
          </ul>
          {% endif %}
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="footer" style="background-color: #f8f9fa; padding-top: 1rem; padding-bottom: 1rem;">
      <div class="container text-center">
          <div class="text-muted mb-2">2025年 渠道部终端监测1.0</div>
          <span class="text-muted">copyright © 齐齐哈尔创新工作室</span>
      </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>